<template>
  <div class="box">
    <a-input v-model="currentName" @input="currentInput" allow-clear @focus="inputFocus" @blur="inputBlur"></a-input>
    <div class="result-list" v-if="show&&filterResultList.length>0">
      <div class="item" v-for="(item,itemIndex) in filterResultList" @mousedown="selectValue(item)" :key="itemIndex">
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

<script>
import { pinyin } from '../../utils/util'
export default {
  props: {
    value: {
      type: String,
      default: ''
    },
    resultList: {
      type: Array,
      default () {
        return []
      }
    },
    index: {
      type: Number,
      default: 0
    }
  },
  computed: {
    filterResultList () {
      return this.resultList.filter(i => i.name.includes(this.currentName))
    }
  },
  watch: {
    value (newVal) {
      console.log(newVal, 'newVal')
      this.currentName = newVal
    },
    // currentName () {
    //     const data = {
    //         code: pinyin(this.currentName),
    //         name: this.currentName,
    //         index: this.index
    //     }
    //     if (this.isSelect) {
    //         data.id = this.currentId
    //     }
    //     this.$emit('change', data)
    //     setTimeout(() => {
    //         this.isSelect = false
    //     }, 200)
    // }
  },
  data () {
    return {
      show: false,
      currentName: '',
      currentId: '',
      isSelect: false
    }
  },
  methods: {
    currentInput () {
      const data = {
          code: pinyin(this.currentName),
          name: this.currentName,
          index: this.index
      }
      if (this.isSelect) {
          data.id = this.currentId
      }
      this.$emit('change', data)
      setTimeout(() => {
          this.isSelect = false
      }, 200)
    },
    inputFocus () {
      this.show = true
    },
    inputBlur () {
      this.show = false
    },
    selectValue (item) {
      this.currentName = item.name
      this.currentId = item.id
      this.show = false
      this.isSelect = true
      const data = {
          code: pinyin(this.currentName),
          name: this.currentName,
          index: this.index
      }
      if (this.isSelect) {
          data.id = this.currentId
      }
      this.$emit('change', data)
      setTimeout(() => {
          this.isSelect = false
      }, 200)
    }
  }
}
</script>

<style lang="less" scoped>
.box{
    width: 150px;
    position: relative;
    .result-list{
        width: 100%;
        max-height: 200px;
        overflow-y: auto;
        overflow-x: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        position: absolute;
        top: 35px;
        left: 0;
        background: #fff;
        z-index: 9999;
        text-indent: 8px;
        border-radius: 5px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        .item{
            height: 30px;
            line-height: 30px;
            cursor: pointer;
        }
        .item:hover{
            background: #5969F6;
            color: #fff;
            font-weight: 500;
        }
    }
}
</style>
